import {Text, View} from "@tarojs/components";
import {ActionSheet, ActionSheetItem, Button, Calendar, Cell, CellGroup, Field, Space} from "@antmjs/vantui";
import React, {useCallback, useState} from "react";
import LogUtils from "@/utils/log";
import Utils from "@/utils/common";
import RouthPath from "@/common/RouthPath";

definePageConfig({
  navigationBarTitleText: '订单查询'
})


export  interface SearchPageModel {
  //订单号
  orderNo?: string;
  //预约时间
  date?: string;
  //订单状态
  status?: string;
}

export default function Search_page() {

  const [show, setShow] = useState(false)
  const [result, setResult] = useState<SearchPageModel>({})
  // @ts-ignore
  const formatDates = useCallback((d) => {
    if (d && d.length) {
      let text: string[] = []
      d.forEach((item) => {
        const res = new Date(item)
        text.push(`${res.getMonth()}-${res.getDate()}`)
      })
      return text.join(` 至 `)
    }
  }, [])
  const [showP, setShowP] = useState(false)
  const [actions] = useState<ActionSheetItem[]>([
    {
      name: '全部',
    },
    {
      name: '待确认',
    },
    {
      name: '待收样',
    },
    {
      name: '进行中',
    },
    {
      name: '待支付',
    },
    {
      name: '已完结',
    },
  ])
  const handleProjectSelect = (e: any) => {
    LogUtils.info(e)
    setResult(prev => ({
      ...prev,
      status: e.detail.name,
    }));
    setShowP(false)
  }
  const dataChange = useCallback((e, type) => {
    //修改值
    setResult((prevValues) => {
      const newValues = {...prevValues};
      if (type === "0") {
        newValues.orderNo = e;
      } else if (type === "1") {
        newValues.date = e;
      }
      return newValues;
    });

  }, []);


  //添加重置方法
  const reset = useCallback(() => {
    setResult({})
  }, [])
  //添加查询方法
  const search = useCallback(() => {
    Utils.navigateTo({
      url: Utils.getUrlWithObject(RouthPath.bookList, {
         ...result
      })
    })
  }, [result])

  return (
    <View style={{height: '100VH'}}>
      <View>
        <CellGroup>
          <Field
            clearable
            label='订单号'
            value={result.orderNo}
            placeholder='请输入订单号'
            onInput={(e) => dataChange(e.detail, "0")}
          />
          <Cell
            renderIcon='选择预约时间'
            renderTitle={<View style={{marginLeft: '20px'}}><Text>{formatDates(result.date)}</Text></View>}
            onClick={() => setShow(true)}
            isLink
          />
          <Cell
            renderIcon='订单状态'
            renderTitle={<View style={{marginLeft: '50px'}}><Text>{result.status}</Text></View>}
            onClick={() => setShowP(true)}
            isLink
          />
        </CellGroup>
        <View style={{display: 'flex', justifyContent: 'center', marginTop: '50px', width: '100%'}}>
          <Button type={'primary'} hairline plain size={'large'} style={{margin: '0 20px'}}
                  onClick={reset}>重置</Button>
          <Button type={'primary'} size={'large'} style={{margin: '0 20px'}} onClick={search}>查询</Button>
        </View>
      </View>
      <Calendar
        show={show}
        type='range'
        onClose={() => setShow(false)}
        onConfirm={(e) => {
          if (Array.isArray(e.detail.value)) {
            const resultDate = e.detail.value.map((date) => date?.valueOf())
            setShow(false)
            dataChange(resultDate, "1")
          }
        }}
      />
      <ActionSheet
        show={showP}
        actions={actions}
        onClose={() => setShowP(false)}
        onSelect={(e) => handleProjectSelect(e)}
      />
    </View>
  )
}
